<template>
  <el-form class="sc-list-filter" label-width="auto" :model="form" inline>
    <template v-if="col">
      <div class="sc-list-filter-col-wrap">
        <div class="sc-list-filter-col-items">
          <el-row>
            <template v-for="(item, key) in form">
              <el-col :key="key" :xl="8" :lg="12" :sm="24" :xs="24">
                <ListFilterItem :obj="item" :obj-key="key" col @change="changeItem" @search="handleSearch"></ListFilterItem>
              </el-col>
            </template>
            <el-form-item>
              <div class="searchButton">
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
              </div>
            </el-form-item>
          </el-row>
        </div>
      </div>
    </template>
    <template v-else>
      <template v-for="(item, key) in form">
        <ListFilterItem :key="key" :obj="item" :obj-key="key" @change="changeItem"></ListFilterItem>
      </template>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'
  import ListFilterItem from './components/ListFilterItem'
  export default {
    components: { ListFilterItem },
    props: {
      keyList: {
        type: Array,
        default() {
          return []
        }
      },
      form: {
        type: Object,
        default() {
          return {}
        }
      },
      col: {
        type: Boolean,
        default() {
          return true
        }
      }
    },
    data() {
      return {
        changeValue: {},
        // 保留员工管理选择的部门
        departmentValue: 0
      }
    },
    computed: {
      ...mapGetters([
        'attendanceDate'
      ])
    },
    watch: {
      form: {
        deep: true,
        handler: function (newValue) {
          this.$store.dispatch('user/setFormValue', this.form)
          // 是否选择了下拉框
          if (newValue) {
            if (this.departmentValue === 0) {
              if (newValue.departmentId) {
                this.departmentValue = newValue.departmentId.value
              }
              if (newValue.DepartmentId) {
                this.departmentValue = newValue.DepartmentId.value
              }
            } else {
              if (newValue.departmentId) {
                // 判断下拉框数据是否和保存的数据一致
                if (newValue.departmentId.value !== this.departmentValue) {
                  this.$store.dispatch('user/setDepartmentValue', { name: 'departmentId', value: newValue.departmentId.value })
                }
              }
              if (newValue.DepartmentId) {
                if (newValue.DepartmentId.value !== this.departmentValue) {
                  this.$store.dispatch('user/setDepartmentValue', { name: 'DepartmentId', value: newValue.DepartmentId.value })
                }
              }
            }
          }
        }
      }
    },
    methods: {
      changeItem(obj) {
        const { key, val } = obj
        this.form[key].value = val
        this.$emit('changItemHandler', obj)
      },
      handleSearch() {
        // 初始化对象
        const tmpObj = {
          pageIndex: 1,
          pageSize: 10,
          search: []
        }

        let indx = 0, keyValue = null, aryList = [], priorities = []

        if (this.keyList.length > 0) {
          this._.forEach(this.form, (item, key) => {
            if (key === 'keyword') {
              // 获得关键字的值
              keyValue = item.value
            } else {
              if (item.value) {
                // 获得非关键字数组
                tmpObj.search.push({
                  key: key,
                  value: item.value,
                  operation: 0,
                  sequence: indx,
                  relationship: 0
                })
                indx++
              }
            }
          })
          if (keyValue) {
            // 获得关键字数组
            this.keyList.forEach((el, index) => {
              priorities.push({
                key: el,
                value: keyValue,
                operation: 6,
                sequence: index,
                relationship: 1
              })
            })
          }
          // 判断非关键子数组是否有值
          if (tmpObj.search.length) {
            // 如果有值  判断是否需要关键字查询
            if (keyValue) { tmpObj.search[tmpObj.search.length - 1].priorities = priorities }
          } else {
            // 判断是否需要关键字查询
            if (keyValue) { tmpObj.search = priorities }
          }
        } else {
          // 获取表单内的值
          this._.forEach(this.form, (item, key) => {
            if (item.type === 'date') {
              let timeKeyOne = ''
              let timeKeyTwo = ''
              if (item.arr) {
                if (item.arr.length === 2) {
                  timeKeyOne = item.arr[0]
                  timeKeyTwo = item.arr[1]
                }
              }
              if (item.value[0]) {
                tmpObj.search.push({
                  key: timeKeyOne,
                  value: item.value[0],
                  operation: 4,
                  sequence: indx,
                  relationship: 0
                })
                indx++
              }
              if (item.value[1]) {
                tmpObj.search.push({
                  key: timeKeyTwo,
                  value: item.value[1],
                  operation: 5,
                  sequence: indx,
                  relationship: 0
                })
                indx++
              }
            } else {
              if (item.value) {
                tmpObj.search.push({
                  key: key,
                  value: item.value,
                  operation: 6,
                  sequence: indx,
                  relationship: 0
                })
                indx++
              }
            }
          })
        }

        if (tmpObj.search.length) {
          delete tmpObj.search[0].relationship
          if (tmpObj.search.length === 1) {
            delete tmpObj.search[0].sequence
          }
        }
        // 提交事件
        this.$emit('search', tmpObj)
      },
      handleReset() {
        this.$store.dispatch('user/setChangeValue')
        const tmpObj = this.attendanceDate.status ? {
          pageIndex: 1,
          pageSize: 10,
          orderBy: "createdTime",
          orderByAscent: false,
          EnterTimeStart: this.attendanceDate.EnterTimeStart,
          EnterTimeEnd: this.attendanceDate.EnterTimeEnd,
          search: []
        } : {
            pageIndex: 1,
            pageSize: 10,
            orderBy: "createdTime",
            orderByAscent: false,
            search: []
          }
        this.$store.dispatch('user/setPageData', { pageIndex: tmpObj.pageIndex, pageSize: tmpObj.pageSize })
        this._.forEach(this.form, item => {
          item.value = ''
        })
        this.$emit('reset', tmpObj)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .searchButton {
    margin-top: 20px;
  }
</style>
